<template>
  <div class="agreementCustomerDetail">
    <div class="detailContent" v-if="type==='look'">
      <filterPanel filterName="SAgreementCustomerDetailFilter" filterTitle="收寄件查询" :filterList="filterData"
                   @filterChange="filterChange"></filterPanel>
      <tablePanel tableName="SAgreementCustomerDetailTable" :tableLoading="loading" tableTitle="收寄件列表"
                  :tableList="tableList"
                  :tableData="tableData" :total="total" :currentPage="form.page_start" :pageSize="form.page_size"
                  @sizeChange="sizeChange" @pageChange="pageChange">
      </tablePanel>
    </div>
    <zyInfoPanel title="收寄件信息" :showUnfoldButton="false" v-else>
      <zyInfoChange :model-info="customerInfo" class="customerInfo"></zyInfoChange>
      <div class="btnArea" :class="{'lookBtnArea': type==='look'}">
        <zy-button class="btn" @click="submit" type="primary" v-if="type!=='look'" :loading="loading">确定</zy-button>
        <zy-button class="btn" @click="back">返回</zy-button>
      </div>
    </zyInfoPanel>
  </div>
</template>

<script>
	export default {
		name: "SAgreementCustomerDetail",
		props: {},
		data() {
			return {
				customerInfo: [
					{
						title: '客户名称',
						name: 'companyname',
						type: 'input',
						maxlength: '50',
						value: '',
						titleClass: 'required'
					},
					{
						title: '经营类型',
						name: 'bistype',
						type: 'input',
						maxlength: '11',
						value: '',
						titleClass: 'required'
					},
					{
						title: '经营地址',
						name: 'address',
						type: 'input',
						value: '',
						titleClass: 'required'
					},
					{
						title: '经营期限',
						name: 'time',
						type: 'date',
						value: [],
						titleClass: 'required'
					},
					{
						title: '法人姓名',
						name: 'legalname',
						maxlength: '20',
						type: 'input',
						value: '',
						titleClass: 'required'
					},
					{
						title: '法人电话',
						name: 'legalmobile',
						type: 'input',
						tag: 'mobile',
						value: '',
						titleClass: 'required'
					},
					{
						title: '法人身份证',
						name: 'legalcardno',
						type: 'input',
						maxlength: '18',
						value: '',
						titleClass: 'required'
					},
					{
						title: '发货员姓名',
						name: 'postername',
						type: 'input',
						maxlength: '20',
						value: '',
						titleClass: 'required'
					},
					{
						title: '发货员电话',
						name: 'postermobile',
						type: 'input',
						tag: 'mobile',
						value: '',
						titleClass: 'required'
					},
				],
				loading: false,
				type: '',
				customerId: '',
				filterData: [
					{
						title: '公司名称',
						name: 'company_name',
						type: 'input',
						value: '',
						maxlength: '50',
						isShow: true,
						isSelected: true
					},
					{
						title: '收件人姓名',
						name: 'receive_communicate_name',
						type: 'input',
						value: '',
						maxlength: '20',
						isShow: true,
						isSelected: true
					},
					{
						title: '收件人手机号',
						name: 'receive_communicate_mobile',
						type: 'input',
						value: '',
						maxlength: '11',
						tag: 'mobile',
						isShow: true,
						isSelected: true
					},
					{
						title: '收件人地址',
						name: 'receive_communicate_address',
						type: 'input',
						value: '',
						maxlength: '20',
						isShow: true,
						isSelected: true
					},
					{
						title: '寄件时间',
						name: 'time',
						type: 'date',
						value: [],
						isShow: true,
						isSelected: true
					},
				],
				form: {
					company_name: "",
					receive_communicate_name: '',
					receive_communicate_mobile: '',
					receive_communicate_address: '',
					time: [],
					page_start: 1,
					page_size: 10
				},
				tableList: [
					{
						title: '客户名称',
						width: 240,
						name: 'companyname',
						isShow: true,
						isSelected: true
					},
					{
						title: '收件人名称',
						width: 120,
						name: 'receive_communicate_name',
						isShow: true,
						isSelected: true
					},
					{
						title: '收件人电话',
						width: 160,
						name: 'receive_communicate_mobile',
						isShow: true,
						isSelected: true
					},
					{
						title: '收件人地址',
						width: 120,
						name: 'receive_communicate_address',
						isShow: true,
						isSelected: true
					},
					{
						title: '寄件时间',
						width: 280,
						name: 'ctime',
						isShow: true,
						isSelected: true
					},
					{
						title: '寄件数量',
						width: 120,
						name: 'sendsize',
						isShow: true,
						isSelected: true
					},
				],
				tableData: [],
				total: 0,
			};
		},
		computed: {
			postData() {
				let data = {
					...this.form,
					pmid: this.customerId,
					pagination: {
						page_start: this.form.page_start,
						page_size: this.form.page_size
					}
				};
				if (this.form.time && this.form.time.length > 0) {
					data.start_create_time = this.form.time[0] / 1000;
					data.end_create_time = this.form.time[1] / 1000;
				}
				return data;
			},
		},
		watch: {},
		components: {},
		methods: {
			submit() {
				let {postData, tipText} = this.$dataValidation(this.customerInfo);

				if (tipText) {
					return this.$message.error(tipText);
				}
				postData['bisstarttime'] = postData.time[0] / 1000;
				postData['bisendtime'] = postData.time[1] / 1000;

				delete postData.time;
				this.loading = true;
				let postUrl = this.$api.createPorotocolMember;
				if (this.type === 'edit') {
					postData['id'] = this.customerId;
					postUrl = this.$api.updatePorotocolMember
				}
				this.$axios.post(postUrl, {
					...postData
				}).then(res => {
					let {code, msg, data} = res;
					this.loading = false;
					if (code == 200) {
						this.back(true);
					} else {
						this.$message.error(msg);
					}
				}).catch(ret => {
					this.$message.error(ret.msg || '服务繁忙，请稍后再试');
				});
			},
			back(isRefresh) {
				this.$blackRoute({path: '/sorting/agreement_customer', that: this, query: {isRefresh: isRefresh}})
			},
			getData() {
				this.$axios.post(this.$api.showPorotocolMember, {
					id: this.customerId
				}).then(res => {
					let {code, msg, data} = res;

					if (code == 200) {
						this.customerInfo = this.customerInfo.filter(item => {
							if (item.name === 'time') {
								item.value = [data.bisstarttime * 1000, data.bisendtime * 1000]
							} else {
								item.value = data[item.name];
							}
							return item
						});
					} else {
						this.$message.error(msg);
					}
				}).catch(ret => {
					this.$message.error(ret.msg || '服务繁忙，请稍后再试');
				});
			},
			sizeChange(val) {
				this.form.page_size = val;
				this.getListProtocolLogistics()
			},
			pageChange(val) {
				this.form.page_start = val;
				this.getListProtocolLogistics()
			},
			filterChange(data) {
				this.form = {...this.form, ...data};
				this.getListProtocolLogistics();
			},
			getListProtocolLogistics() {
				this.loading = true;

				this.$axios.post(this.$api.listProtocolLogistics, this.postData).then(res => {
					let {code, msg, data} = res;
					this.loading = false;
					if (code == 200) {
						this.tableData = data.list.filter(item => {
							item.companyname = item.pmember.companyname;
							item.bistype = item.pmember.bistype;
							item.postername = item.pmember.postername;
							item.postermobile = item.pmember.postermobile;
							return item;
						});
						this.total = data.pagination.total_count || 0;
					} else {
						this.total = 0;
						this.tableData = [];
					}
				}).catch(ret => {
					this.$message.error(ret.msg || '服务繁忙，请稍后再试');
				});
			},
		},
		mounted() {
			this.type = this.$route.query.type;
			this.customerId = this.$route.query.customerId;
			if (this.customerId && this.type !== 'look') {
				this.getData()
			}
			if (this.type === 'look') {
				this.getListProtocolLogistics();
			}
		},
		created() {
		}
	}
</script>

<style scoped lang="less" src="@/style/sorting/agreementCustomer/agreementCustomerDetail/index.less">

</style>
